<template>
  <!-- 单个电子围栏编辑和修改 -->
  <div class="container">
    <div style="width: 100%;height: 500px" id="containerMap"></div>
    <div class="handle">
      <div class="handleBtn">
        <el-button
          type="info"
          :disabled="!editFlag"
          v-if="createFlag"
          @click="drawPolygon"
          plain
        >新建管养范围
        </el-button
        >
        <el-button
          type="info"
          v-else-if="!createFlag"
          @click="closedrawPolygon"
          plain
        >完成绘制
        </el-button
        >
      </div>
      <div class="handleBtn">
        <el-button
          type="info"
          :disabled="!createFlag"
          v-if="editFlag"
          @click="editDrawPolygon"
          plain
        >编辑管养范围
        </el-button
        >
        <el-button type="info" v-else-if="!editFlag" @click="close" plain
        >结束编辑
        </el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
window._AMapSecurityConfig = {
  securityJsCode: '87713edd491f2a07dadca3f1c858f85d'
}
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  props: ['param'],
  name: "map-view",
  data() {
    return {
      map: null, //地图
      paths: [], //覆盖物坐标数组
      mouseTool: null, //覆盖物的绘制模式
      polyEditor: null, //覆盖物的编辑模式
      editPolygon: null, //用于清除高德地图保留的覆盖物
      createFlag: true,
      editFlag: true,
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "a083c3a221da3b7ffcfc49bf0ffaae98", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.CircleEditor", "AMap.PolyEditor", "AMap.MouseTool"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerMap", {
            // pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度 viewMode=3D才生效
            zoom: 11, // 初始化地图级别
            center: [118.785997, 32.050383], //初始化地图中心点位置
          });

          // 新增坐标点
          // this.addMarker(this.map);

          // 绘制多边形需要，将插件提前放置全局化
          this.mouseTool = new AMap.MouseTool(this.map);
          if (this.param.length>0) {
            this.paths = JSON.parse(this.param)
            this.editFlag = true
            this.editDrawPolygon()
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 新增坐标点
    addMarker(map) {
      let content = `<div class="test" >自定义内容
        </div>`;
      // 将 Icon 实例添加到 marker 上:
      var marker = new AMap.Marker({
        position: new AMap.LngLat(116.39, 39.9),
        offset: new AMap.Pixel(-10, -10),
        content: content, // 自定义点标记覆盖物内容
        // icon: icon, // 添加 Icon 实例
        // title: "北京",
        zoom: 13,
      });

      // map.add(marker);
      //实例化信息窗体
      let contentPupop = `<div style="width:100%;height:20%;background:skyblue;"><img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'><br><a href='https://ditu.amap.com/detail/B000A8URXB?citycode=110105'>详细信息</a></div>`;
      var infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: contentPupop,
        offset: new AMap.Pixel(0, -15),
      });

      //鼠标点击marker弹出自定义的信息窗体
      marker.on("click", () => {
        infoWindow.open(map, marker.getPosition());
      });

      // 创建 AMap.Icon 实例：
      var icon = new AMap.Icon({
        size: new AMap.Size(40, 50), // 图标尺寸
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", // Icon的图像
        imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
      });

      // 第二个标点
      var marker2 = new AMap.Marker({
        position: new AMap.LngLat(116.38, 39.98),
        offset: new AMap.Pixel(-10, -10),
        // icon: icon, // 添加 Icon 实例
        title: "北京",
        zoom: 13,
      });
      // map.add(marker2);
      // map.add([marker, marker2]);
    },
    // 绘制多边形
    drawPolygon() {
      this.mouseTool.polygon({
        strokeColor: "#FF33FF",
        strokeWeight: 2,
        strokeOpacity: 0.2,
        fillColor: "#1791fc",
        fillOpacity: 0.2,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      });
      this.createFlag = false;
      // 打印多边形的坐标点
      this.mouseTool.on("draw", (event) => {
        let paths = event.obj.getPath(); //取得绘制的多边形的每一个点坐标
        // 保存坐标到变量里
        this.paths = paths.map((item) => {
          let arr = [item.lng, item.lat];
          return arr;
        });
        this.editPolygon = event.obj;
        // 已经保存了坐标点
        // console.log(this.paths, "paths");
        // 踩到一个坑,将this.paths保存到了data变量中,下面拿出来使用的时候,拿不到数据
        // 解决了，function(){} 改为箭头函数 ()=>{}
      });
    },
    // 结束绘制多边形
    closedrawPolygon() {
      this.mouseTool.close();
      this.createFlag = true;
      this.$emit("ok", JSON.stringify(this.paths))
    },
    // 编辑多边形
    editDrawPolygon() {
      if (this.editPolygon) {
        // 只接收覆盖物的对象,即event.obj
        this.map.remove([this.editPolygon]);
      }
      let path = [];
      if (this.paths.length > 0) {
        path = this.paths;
      } else {
        path = [
          [116.403322, 39.920255],
          [116.410703, 39.897555],
          [116.402292, 39.892353],
          [116.389846, 39.891365],
        ];
      }
      let polygon = new AMap.Polygon({
        path: path,
        strokeColor: "#FF33FF",
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        fillColor: "#1791fc",
        zIndex: 50,
      });
      // 清除上一次操作遗留的覆盖物
      this.editPolygon = polygon;
      // 讲绘制的图像添加到地图上
      this.map.add(polygon);
      // 缩放地图到合适的视野级别
      this.map.setFitView([polygon]);
      // 设计编辑模式
      this.polyEditor = new AMap.PolyEditor(this.map, polygon);
      // 打开编辑模式
      this.polyEditor.open();
      this.editFlag = false;
      // 第二次编辑同一个覆盖物的时候，踩到一个坑，因为高德地图添加覆盖物时，覆盖物会一直在地图上，如果新增新的覆盖物没有清除原来的覆盖物时，且新旧坐标一样，就会重叠在一起。this.map.add(polygon);
      // 解决方案：remove上一个操作遗留的覆盖物
    },
    // 结束绘制多边形
    close() {
      this.polyEditor.on("end", (event) => {
        // event.target 即为编辑后的多边形对象
        let paths = event.target.getPath(); //取得绘制的多边形的每一个点坐标
        // 再次保存坐标到变量里
        this.paths = paths.map((item) => {
          let arr = [item.lng, item.lat];
          return arr;
        });
      });
      this.polyEditor.close();
      this.editFlag = true;
      this.$emit("ok", JSON.stringify(this.paths))
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;

  #containerMap {
    width: 100%;
    height: 100%;
  }

  .handle {
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: rgba(99, 99, 99, 0.4);
    bottom: 5%;
    right: 2%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 19px;
    border-radius: 0px 0px 10px 10px;
    padding: 0 30px;
    box-sizing: border-box;

    .handleBtn {
      cursor: pointer;
    }
  }
}
</style>
